/** @author: duanhaijiao  @date 2022/7/10--17:50 **/

/* name: "word" */
<template>
    <div class="app">
        <el-button @click="preview">预览</el-button>
        <el-dialog
                v-if="previewShow"
                title="预览"
                :visible.sync="previewShow"
                append-to-body
                width="90%"
        >
            <!-- word 显示-->
            <div ref="word"></div>

            <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="previewShow = false"
        >关 闭</el-button
        >
      </span>
        </el-dialog>
    </div>
</template>
<script>
    import axios from "axios";

    const docx = require("docx-preview");
    window.JSZip = require("jszip");
    export default {
        data() {
            return {
                previewShow: false,
            };
        },
        methods: {
            // 后端返回二进制流
            preview() {
                // 这里需要提起打开弹窗，因为有时很找不到word的ref 会报错
                this.previewShow = true;
                axios
                    .get("你们后端的地址（下载地址）", {
                        responseType: "blob",
                    })
                    .then((res) => {
                        // 对后端返回二进制流做处理
                        const blob = new Blob([res]);
                        docx.renderAsync(blob, this.$refs.word);
                    });
            },
        },
    };
</script>
<style scoped>
</style>